<div class="search-line row">
	<div class="clickableEffect" style="width: 80%; margin-left: 15px; height: 30px; margin-top: 10px; font-size: 16px; color: #fff; text-shadow: none !important;" data-bind="text: $root.bookVM.FavoriteFolderLabel(), click: $root.overviewVM.getFavoriteByFolder">
	</div>
	<div class="folder-arrow clickableEffect" data-bind="click: $root.overviewVM.getFavoriteByFolder"></div>
</div>
<div>
	<div class="row header navigation-bar-bgd">
		<div class="sync" id="fastButtonSyncFavorite">
			<img class="btn-sync clickableEffect" src="img/refresh.png" />
		</div>
		<div class="header-title" data-bind="text: $root.overviewVM.title"></div>
		<div class="search edit-button yellow-bgd clickableEffect" data-bind="click: $root.overviewVM.editFavorite, text: $root.overviewVM.isEditing() ? overviewVM.strDone : overviewVM.strEdit, style: {display: $root.overviewVM.list().length > 0 ? 'block' : 'none'}">
		</div>
	</div>
	<div id="wrapper_scrollpager" class="wrapper scroller overview">
		<div>
			<div style="width: 100%; height: 40px;">&nbsp;</div>
			<div>
				<ul data-bind="foreach: $root.overviewVM.list">
					<li class="browse clickableEffect">
                        <div style="margin-top: 0px; border: 1px solid transparent;" data-bind="click: $root.overviewVM.viewBook, attr: { 'id': overView.dataId() + 'id'}">
                            
                            <div data-bind="style: { display:  overView.isPrepareDelete() ? 'block' : 'none'}">
                                <div class="overview-delete-bg">&nbsp;</div>
                                <div class="overview-delete-text" data-bind="text: $root.overviewVM.areYouSureDelete">&nbsp;</div>
                                <div class="overview-delete-yes" data-bind="click: $root.overviewVM.deleteFavoriteYes, text: bookVM.strYes">Yes</div>
                                <div class="overview-delete-no" data-bind="click: $root.overviewVM.deleteFavoriteNo, text: bookVM.strNo">No</div>
                            </div>
                            
                            <div class="overview-narrow"></div>
                            <div style="z-index: 10" class="overview-delete clickableEffect" data-bind="click:  $root.overviewVM.deleteFavorite, style: { display:  $root.overviewVM.isEditing() ? 'block' : 'none'}" />
                            <div>
                                <div class="overview-images" style="z-index: 0">
                                    <img class="sml-loading" />
                                </div>
                                <img onLoad=" $(this).fadeIn('normal').siblings('div').fadeOut('normal') " data-bind="attr:{src: overView.thumbnailMediumDisplay}" style="display: none; z-index: 1" class="overview-images" />
                            </div>
                            <div style="margin-left: 54px; margin-top: -6px;">
                                <a class="title" data-bind="text: overView.title"></a>
                                <div class="overview-item">
                                    <p data-bind="text: overView.author" class="overview-author author"></p>
                                    <div class="overview-text" style = "margin-top: -13px;" data-bind="text: overView.subExtraText">
                                    </div>
                                </div>
                            </div>
                        </div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>